<template>
  <div class="shopList" ref="elememt">
      <div class="header">
          <router-link to="/" tag="p"><img src="../../assets/Fill 1@2.88x.png" alt="" class="router"></router-link>
          <span>常购清单</span>
          <img src="../../assets/sousuo.png" alt="" >
          <i @click="bianji">{{!judge?'编辑':'完成'}}</i>
      </div>
      <van-tabs @click="onClick()"   sticky :offset-top="45" :line-width="56" :line-height="2" title-active-color="#DD3333" title-inactive-color="#333333" :lazy-render="false">
        <van-tab title="全部商品" class="tab" >
              <div class="lists" v-if="data.length>0">
                  <div>
                       <div class="list" v-for="(item,index) in data" :key="index" @click="Gotodetails(item)">
                               <!-- <div class="list-move"  v-if="judge">
                                  <img  @click="active"
                                  v-bind="{src:!img?require('../assets/4 (1).png'):require('../assets/4 (2).png')}"
                                      alt >
                               </div> -->
                                <div class="list-left">
                                   <img :src="item.mainPic" alt="">
                                </div>
                                <div class="list-right">
                                    
                                    <p class="font">{{item.goodsName}}</p>
                                    <p class="spice">
                                        <span class="spice-a">￥</span>
                                        <span class="spice-b">{{item.orderPrice|addZero}}</span>
                                        <span class="spice-d">{{item.integerZeroConvert}}</span>
                                    </p>
                                        <p class="site">
                                        <span>已购买{{item.purchaseTimes}}次</span>
                                        <span class="site-b">{{item.dealer.name}} </span>
                                        </p>
                                        <p class="shop" >
                                            <img src="../../assets/Page 1.png" alt="" >
                                        </p>
                                </div>
                               <div class="list-btn" v-if="judge" @click="clear(index)">
                                 删除所选商品
                             </div>
                        </div>
                  </div>
                 
              </div>
                <div class="kong" v-else>
                    <p class="kong-one"><img src="../../assets/ic_search_no_data.png" alt=""></p>
                    <p class="kong-two">暂无常购商品</p>
                    <router-link tag="p" to="/"><p class="kong-three">去首页逛逛</p></router-link>
                </div>
        </van-tab>

        <van-tab title="经销商" class="tab">
          
            <div @click="goShoplist(index)" class="tab-two" v-for="(dist,index) in dist" :key="index">
                <p v-if="judge">
                     <img  @click="active"  v-bind="{src:!img?require('../../assets/4 (1).png'):require('../../assets/4 (2).png')}">
                </p>
                
                <img src="../../assets/gongsi.png" alt="" class="two-img">
                <div class="two-left">
                   <span class="left-a">{{dist.dealer.name}}</span>
                   <span class="left-b">同店铺商品：{{dist.goodsNum}}</span>
                </div>
                <div class="two-right">
                   <span class="right-a"><img src="../../assets/Fill 1.png" alt=""></span>
                   <span class="right-b">收藏店铺</span>
                </div>
                <div class="list-btn" v-if="judge" @click="clear(index)">
                   删除所选商品
                </div>
            </div>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
import BScroll from 'better-scroll' 
import { Tab, Tabs } from 'vant';
import Vue from 'vue'
Vue.use(Tab).use(Tabs);
import Vant from 'vant';
import { Dialog } from 'vant';
Vue.use(Dialog);

export default {
   data(){
      return{
       data:[],
       dist:[],
       judge:false,
       img:false,
    //    index:''
      }
    },
  methods: {
        Gotodetails(item){
            let skuid=item.skuId
            this.$router.push({name:'details',query:{skuid:skuid}})
        },
        goShoplist(index){
            console.log(this.dist[index].dealer.id)
            this.$store.commit('setdealerId',this.dist[index].dealer.id)
            this.$router.push('/shopLists')
        },
        onClick() {
        
        //    this.$toast(title);
        },
        bianji(){
           this.judge=!this.judge
        },
        clear: function(index) {
            if(this.img=this.img){
                 Dialog.confirm({
                    title: '确认删除选中的经销商吗？',
                    message: '删除后，经销商及其常购商品将移出清单'
                    }).then(() => {
                        this.dist.splice(index, 1);
                    // on confirm 
                    }).catch(() => {
                    alert(111)
                    });
            }
           
            //   this.dist.splice(index, 1);
         },
        active(){
            this.img=!this.img
            
            
        },
        getDistributor(){
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    let userId=this.$store.state.userInfo.id
                    let stationId=this.$store.state.stationId
                    this.$http.get('https://web-gateway.newbeescm.com/b2b-app-web/getUsualDealerByUserId/'+userId+'/'+stationId,{
                        headers
                    }
                    )
                    .then(res=>{
                       if(res.data.status.statusCode===0){
                        this.dist=res.data.result
                        console.log(this.dist)
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
        },
        getData(){
                   let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    }else{
                        headers = {};
                    }
                    
                     this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/usualGoodsByUserId',{
                            groupStoreId:this.$store.state.userInfo.id,
                            merchantId:this.$store.state.merchantInfo.merchantId,
                            shopId:this.$store.state.storeId.storeId,
                            stationId:this.$store.state.stationId,
                            userId:this.$store.state.merchantInfo.userId,
                    },
                  
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.data=res.data.result
                        this.data=res.data.result.list
                        console.log(res.data.result)
                        if(res.data.status.statusCode===0){
                            this.result=res.data.result
            
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                    })
        }
  },
  created(){
    this.getData()
    this.getDistributor()
  },
  filters:{
      addZero(value){
            if(isNaN(Number(value))){
                return value
            }
            return Number(value).toFixed(2)
        }
  }
}

</script>
<style scoped lang="scss">
.shopList{
    width:100%;
    background: #f8f8f8;
    // position: relative;
}
.header{
    width:100%;
    height:0.45rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    .router{
         width:0.07rem;
        height:0.15rem;
        position: absolute;
        left: 0.2rem;
        top:0.16rem;
    }
    span{
        font-family: PingFangSC-Regular;
        font-size: 0.18rem;
        color: #030303;
        letter-spacing: -0.36px;
    }
    img{
        width:0.16rem;
        height:0.16rem;
        position: absolute;
        right: 0.63rem;
        top:0.16rem;
    }
    i{  font-style:normal;
        font-family: PingFangSC-Regular;
        font-size: 0.16rem;
        color: #666666;
        letter-spacing: -0.36px;
        line-height: 0.16rem;
        position: absolute;
        top:0.15rem;
        right:0.14rem;
    }
    &::after{
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background: #ccc;
            height: 1px;
            transform:scale(1,0.5) 
    }
}
.tab{
    width:100%;
    // overflow: hidden;
    background: #fff;
    margin-top:0.06rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .list{
                width:3.4rem;
                height:1rem;
                padding: 0.14rem 0.18rem 0.09rem 0.1rem;
                display: flex;
                align-items: center;
                .list-move{
                    width:0.2rem;
                    height:0.2rem;
                    margin-right:0.1rem;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .list-left{
                        width:1rem;
                        height:1rem;
                        img{
                            width:100%;
                            height:100%;
                        }
                }
                .list-right{
                    display: flex;
                    flex:1;
                    flex-direction: column;
                    padding-left:0.1rem;
                    position: relative;
                    .font{
                        font-family: PingFangSC-Regular;
                        font-size: 0.14rem;
                        color: #333333;
                        letter-spacing: 0;
                        line-height: 0.15rem;
                        overflow:hidden; 
                        text-overflow:ellipsis;
                        display:-webkit-box; 
                        -webkit-box-orient:vertical;
                        -webkit-line-clamp:2; 
                    }
                    .spice{
                        width:100%;
                        height:0.2rem;
                        margin-top: 0.25rem;
                    .spice-a{
                        font-size:0.12rem;
                        color: #DD3333;
                        letter-spacing: -0.35px;
                        line-height: 0.18rem;
                    }
                    .spice-b{
                            font-family: PingFangSC-Regular;
                            font-size: 0.18rem;
                            color: #DD3333;
                            letter-spacing: -0.35px;
                            line-height: 0.18rem;
                    }
                    .spice-c{
                        font-size:0.14rem;
                        color: #DD3333;
                        letter-spacing: -0.35px;
                        line-height: 0.18rem;
                    }
                    .spice-d{
                        font-family: PingFangSC-Regular;
                        font-size: 0.1rem;
                        color: #999999;
                        letter-spacing: -0.29px;
                        line-height: 0.1rem;
                        margin-left:0.18rem;
                    }
                    }
                    .site{
                        margin-top:0.06rem;
                        font-family: PingFangSC-Regular;
                        font-size: 0.1rem;
                        color: #999999;
                        letter-spacing: -0.29px;
                        line-height: 0.1rem;
                    .site-b{
                        margin-left:0.18rem;
                    }
                    }
                    .shop{
                        position: absolute;
                        right:0;
                        bottom:0.1rem;
                        width:0.16rem;
                        height:0.16rem;
                    img{
                        height:100%;
                    }
                    }
                }
    }
    .tab-two{
        width:100%;
        height:0.68rem;
        display: flex;
        justify-content:flex-start;
        align-items: center;
        position: relative;
        p{
            width:0.2rem;
            height: 0.2rem;
            margin-left:0.05rem;
            img{
                width:100%;
                height:100%;
            }
        }
        .two-img{
            margin-left:0.1rem;
            width:0.26rem;
            height:0.27rem;
        }
        .two-left{
            margin-left:0.14rem;
            display: flex;
            flex-direction: column;
            .left-a{
                font-family: PingFangSC-Regular;
                font-size: 0.14rem;
                color: #333333;
                letter-spacing: -0.41px;
                line-height: 0.14rem;
            }
            .left-b{
                margin-top:0.13rem;
                font-family: PingFangSC-Regular;
                font-size: 0.12rem;
                color: #999999;
                letter-spacing: -0.41px;
                line-height: 0.12rem;
            }
        }
        .two-right{
            position: absolute;
            right:0.13rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            .right-a{
                width:0.16rem;
                height:0.16rem;
                img{
                    width:100%;
                    height:100%;
                }
            }
            .right-b{
                margin-top:0.14rem;
                font-family: PingFangSC-Regular;
                font-size: 0.12rem;
                color: #999999;
                letter-spacing: -0.41px;
                line-height: 0.12rem;
            }
        }
        &::after{ 
                content: "";
                position: absolute;
                width: 100%;
                left: 0;
                bottom: 0;
                background: #ccc;
                height: 1px;
                transform:scale(1,0.5) 
        }
    }
    .list-btn{
        width:100%;
        height:0.44rem;
        background: #333333;
        position: fixed;
        bottom:0;
        left:0;
        right:0;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.kong{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .kong-one{
        width:1rem;
        height:0.75rem;
        margin-top:1.11rem;
        justify-content:center;
        img{
            width:100%;
            height:100%;
        }
    }
    .kong-two{
        font-size: 0.14rem;
        color: #666666;
        letter-spacing: 0;
        line-height: 0.14rem;
        margin-top:0.1rem;
    }
    .kong-three{
        width:1.2rem;
        height:0.32rem;
        font-size:0.14rem;
        font-family: PingFangSC-Regular;
        border: 1px solid #DD3333;
        border-radius: 20px;
        margin-top:0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>